<template>
  <div class="sider">
    <nav>
      <img src="../static/img/麦田观.jpg" class="Guan" alt="" @click="drawer = true" />
      <RouterLink to="/">
        <el-button type="primary" id="mainPage" class="btn-grad"> 主页 </el-button>
      </RouterLink>

      <RouterLink to="/discoverMusic/songList">
        <el-button type="success" id="discover" class="btn-grad"> 发现音乐 </el-button>
      </RouterLink>

      <RouterLink to="/video">
        <el-button type="success" id="video" class="btn-grad"> 视频 </el-button>
      </RouterLink>
    </nav>

    <el-drawer v-model="drawer" :direction="'ttb'" size="90%">
      <template #header="{ close }">
        <span>
          <!-- <span style="font-size: 40px;" >笙音</span>   <span>2.0</span> -->
        </span>
      </template>
      <div class="sy">
        <div class="mainMes">
          <div class="top" ref="top">
            <img src="../static/img/麦田观.jpg" alt="" class="topGuan" />
          </div>
          <div class="middle" ref="middle">
            <p style="font-size: 50px; color: white">笙音</p>
            <p style="font-size: 20px; color: gold">2.0</p>

            <p style="font-size: 30px; color: white">日暮西山向晚，谁家袅袅炊烟</p>
            <img
              src="../static/img/笙音播放.svg"
              alt=""
              class="SYPlayIcon"
              @click="play"
            />
          </div>
          <div class="bottom" ref="bottom">
            <el-tooltip
              content="<span><strong>QQ：3251383489</strong></span>"
              raw-content
            >
              <img src="../static/img/QQ.svg" alt="" class="QQ" />
            </el-tooltip>

            <el-tooltip
              content="<span><strong>weChat：longxiaoguan123</strong></span>"
              raw-content
            >
              <img src="../static/img/weChat.svg" alt="" class="weChat" />
            </el-tooltip>
            <el-tooltip
              content="<span><strong>B站：https://space.bilibili.com/503181222</strong></span>"
              raw-content
            >
              <img src="../static/img/BStation.svg" alt="" class="BStation" />
            </el-tooltip>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { defineComponent, ref, reactive, toRefs, watch } from "vue";
import { storage } from "@/stores/storage";
import { getSongUrl } from "@/service/songs";

export default defineComponent({
  setup() {
    let store = storage();
    let drawer = ref(false);
    let top = ref();
    let middle = ref();
    let bottom = ref();
    function extend() {
      setTimeout(() => {
        middle.value.style.height = "200px";
      }, 1000);
      setTimeout(() => {
        middle.value.style.opacity = 1;
      }, 1500);
    }
    async function play(row) {
      row = {
        id: 531040898,
        name: "马步谣",
        picUrl: "http://p4.music.126.net/x5hyKGsC3YUC38dkk7d73w==/109951163116870505.jpg",
      };
      let songUrl = "";
      await getSongUrl(row.id)
        .then((res) => {
          songUrl = res.data.data[0].url;
        })
        .catch((err) => {
          ElMessage("获取错误,请重新尝试");
        });
      if (songUrl) {
        store.addSongPlayList(row.id, row.name, songUrl, row.picUrl);
        store.changeIsImmediatelyPlay();
      }
    }
    watch(
      () => drawer.value,
      (v1, v2) => {
        if (v1) {
          if (v1 == true) {
            extend();
          }
        }
      }
    );
    return {
      drawer,
      top,
      middle,
      bottom,
      play,
    };
  },
});
</script>

<style scoped>
#mainPage {
  position: absolute;
  top: 220px;
  margin: 20px;
  width: 110px;
}

#discover {
  position: absolute;
  top: 295px;
  margin: 20px;
  width: 110px;
}
#video {
  position: absolute;
  top: 370px;
  margin: 20px;
  width: 110px;
}
.btn-grad {
  background-image: linear-gradient(to right, #e55d87 0%, #5fc3e4 51%, #e55d87 100%);
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  box-shadow: 0 0 20px #eee;
  border-radius: 10px;
  display: block;
}

.btn-grad:hover {
  background-position: right center;
  color: #fff;
  text-decoration: none;
}
.Guan {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  position: absolute;
  top: 50px;
  margin: 20px;
  cursor: pointer;
  transition: 0.2s;
}
.Guan:hover {
  transform: scale(0.9);
}
.sy {
  width: 100%;
  height: 500px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mainMes {
  user-select: none;
  width: 1145px;
  height: 500px;
  background: url(../static/img/日落.png);
  background-size: contain;
  background-repeat: none;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.top {
  width: 500px;
  height: 100px;
  z-index: 2;
  border-bottom: #fff solid 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.middle {
  width: 500px;
  height: 0px;
  z-index: 1;
  transition: 1s;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  opacity: 0;
}
.topGuan {
  height: 100px;
  width: 100px;
  border-radius: 50%;
}
.bottom {
  width: 500px;
  height: 100px;
  z-index: 2;
  border-top: #fff solid 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.weChat {
  width: 50px;
  height: 50px;
  margin: 20px 0 20px 40px;
  transition: 0.5s;
}
.weChat:hover {
  cursor: pointer;
  transform: scale(1.1);
}
.QQ {
  width: 40px;
  height: 40px;
  margin: 20px;
  transition: 0.5s;
}
.QQ:hover {
  cursor: pointer;
  transform: scale(1.1);
}
.BStation {
  width: 90px;
  height: 90px;
  margin: 20px;
  transition: 0.5s;
}
.BStation:hover {
  cursor: pointer;
  transform: scale(1.1);
}
.SYPlayIcon {
  margin-top: 10px;
  width: 50px;
}
.SYPlayIcon:hover {
  cursor: pointer;
  border-radius: 50%;
  background-color: white;
}
</style>
